<template>
  <div>
    <table border="1" v-if="adxId === EXCHANGE.BAIDU_INFO_FLOW">
      <thead>
        <tr v-show="hasTheadGroup" class="">
          <th :colspan="colspan_plan" class="tc">设置账号与{{ planLabel }}</th>
          <th :colspan="colspan_campaign" class="tc">设置{{ campaignLabel }}</th>
          <th v-if="cols.length > 4" :colspan="cols.length - 4" class="tc">设置创意素材</th>
        </tr>
        <tr class="header">
          <th v-for="(item, index) in cols" :key="item.name" v-show="!item.hide" :style="{ 'text-align': item.align || 'left' }">
            <span>{{ item.text }}</span>
            <span class="text-muted ml4" v-show="store[item.dataField]?.length">
              {{ store[item.dataField]?.length }}
              <span v-show="item.name == 'creatives'">组</span>
            </span>
            <span
              class="fr cur-p v1-f-success ml10"
              v-show="item.hasEmpty && item.dataField && store[item.dataField]?.length"
              @click="eventEmptySelectItems(item)"
              >清空</span
            >
            <span class="fr cur-p v1-f-success editIcon" :class="{ disabled: index > 100 }" @click="eventShowEditPop(item)">{{
              item.editTypeText || "编辑"
            }}</span>
            <slot :name="item.headSlot"></slot>
          </th>
        </tr>
      </thead>
      <tbody style="">
        <tr style="" class="content">
          <td
            v-for="item in cols"
            :key="item.name"
            :data-name="item.name"
            :style="{
              'text-align': item.align || 'left',
              'width': (item.width || 150) + 'px',
              'max-width': (item.width || 150) + 'px',
              'min-width': (item.width || 150) + 'px',
            }"
            v-show="!item.hide"
          >
            <div class="cell" :style="{ 'height': (item.height || 350) + 'px', 'overflow-y': 'auto' }">
              <slot :name="item.slot"></slot>
              <component :is="renderMap.get(item.render)?.(item) ?? renderMap.get('default')"></component>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <table border="1" v-if="adxId === EXCHANGE.QUTOUTIAO">
      <thead>
        <tr v-show="hasTheadGroup" class="">
          <th :colspan="1" class="tc">设置广告账户</th>
          <th :colspan="1" class="tc">设置广告计划</th>
          <th :colspan="2" class="tc">设置广告单元</th>
          <th v-if="cols.length > 4" :colspan="4" class="tc">设置创意素材</th>
        </tr>
        <tr class="header">
          <th v-for="(item, index) in cols" :key="item.name" v-show="!item.hide" :style="{ 'text-align': item.align || 'left' }">
            <span>{{ item.text }}</span>
            <span class="text-muted ml4" v-show="store[item.dataField]?.length">
              {{ store[item.dataField]?.length }}
              <span v-show="item.name == 'creatives'">组</span>
            </span>
            <span
              class="fr cur-p v1-f-success ml10"
              v-show="item.hasEmpty && item.dataField && store[item.dataField]?.length"
              @click="eventEmptySelectItems(item)"
              >清空</span
            >
            <span class="fr cur-p v1-f-success editIcon" :class="{ disabled: index > 100 }" @click="eventShowEditPop(item)">{{
              item.editTypeText || "编辑"
            }}</span>
            <slot :name="item.headSlot"></slot>
          </th>
        </tr>
      </thead>
      <tbody style="">
        <tr style="" class="content">
          <td
            v-for="item in cols"
            :key="item.name"
            :data-name="item.name"
            :style="{
              'text-align': item.align || 'left',
              'width': (item.width || 150) + 'px',
              'max-width': (item.width || 150) + 'px',
              'min-width': (item.width || 150) + 'px',
            }"
            v-show="!item.hide"
          >
            <div class="cell" :style="{ 'height': (item.height || 350) + 'px', 'overflow-y': 'auto' }">
              <slot :name="item.slot"></slot>
              <component :is="renderMap.get(item.render)?.(item) ?? renderMap.get('default')"></component>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <table border="1" v-if="adxSubId === EXCHANGE.QIANCHUAN_QY">
      <thead>
        <tr>
          <th :colspan="2">设置账户和营销目标</th>
          <th :colspan="1">设置计划</th>
          <th :colspan="2">设置创意素材</th>
        </tr>
        <tr class="header">
          <th v-for="(item, index) in cols" :key="item.name" v-show="!item.hide" :style="{ 'text-align': item.align || 'left' }">
            <span>{{ item.text }}</span>
            <span
              class="fr cur-p v1-f-success ml10"
              v-show="item.hasEmpty && item.dataField && store[item.dataField]?.length"
              @click="eventEmptySelectItems(item)"
              >清空</span
            >
            <span class="fr cur-p v1-f-success editIcon" :class="{ disabled: index > 100 }" @click="eventShowEditPop(item)">{{
              item.editTypeText || "编辑"
            }}</span>
            <slot :name="item.headSlot"></slot>
          </th>
        </tr>
      </thead>
      <tbody style="">
        <tr style="" class="content">
          <td
            v-for="item in cols"
            :key="item.name"
            :data-name="item.name"
            :style="{
              'text-align': item.align || 'left',
              'width': (item.width || 150) + 'px',
              'max-width': (item.width || 150) + 'px',
              'min-width': (item.width || 150) + 'px',
            }"
            v-show="!item.hide"
          >
            <div class="cell" :style="{ 'height': (item.height || 350) + 'px', 'overflow-y': 'auto' }">
              <slot :name="item.slot"></slot>
              <component :is="renderMap.get(item.render)?.(item) ?? renderMap.get('default')"></component>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <table border="1" v-if="adxId === EXCHANGE.XIAOMI">
      <thead>
        <tr v-show="hasTheadGroup" class="">
          <th :colspan="1" class="tc">设置广告账户</th>
          <th :colspan="1" class="tc">设置广告计划</th>
          <th :colspan="2" class="tc">设置广告组</th>
          <th v-if="cols.length > 4" :colspan="4" class="tc">设置创意素材</th>
        </tr>
        <tr class="header">
          <th v-for="(item, index) in cols" :key="item.name" v-show="!item.hide" :style="{ 'text-align': item.align || 'left' }">
            <span>{{ item.text }}</span>
            <span class="text-muted ml4" v-show="store[item.dataField]?.length">
              {{ store[item.dataField]?.length }}
              <span v-show="item.name == 'creatives'">组</span>
            </span>
            <span
              class="fr cur-p v1-f-success ml10"
              v-show="item.hasEmpty && item.dataField && store[item.dataField]?.length"
              @click="eventEmptySelectItems(item)"
              >清空</span
            >
            <span class="fr cur-p v1-f-success editIcon" :class="{ disabled: index > 100 }" @click="eventShowEditPop(item)">{{
              item.editTypeText || "编辑"
            }}</span>
            <slot :name="item.headSlot"></slot>
          </th>
        </tr>
      </thead>
      <tbody style="">
        <tr style="" class="content">
          <td
            v-for="item in cols"
            :key="item.name"
            :data-name="item.name"
            :style="{
              'text-align': item.align || 'left',
              'width': (item.width || 150) + 'px',
              'max-width': (item.width || 150) + 'px',
              'min-width': (item.width || 150) + 'px',
            }"
            v-show="!item.hide"
          >
            <div class="cell" :style="{ 'height': (item.height || 350) + 'px', 'overflow-y': 'auto' }">
              <slot :name="item.slot"></slot>
              <component :is="renderMap.get(item.render)?.(item) ?? renderMap.get('default')"></component>
            </div>
          </td>
        </tr>
      </tbody>
    </table>

    <table border="1">
      <thead>
        <tr v-show="hasTheadGroup">
          <th v-for="(item, index) in headTips" v-show="!item.hide" :key="index">
            <span>{{ item.text }}</span>
          </th>
        </tr>
        <tr>
          <th v-for="(item, index) in cols" :key="index" v-show="!item.hide">
            <span>{{ item.text }}</span>
            <span class="text-muted ml4" v-show="store[item.dataField]?.length">
              {{ store[item.dataField]?.length }}
              <span v-show="item.name == 'creatives'">组</span>
            </span>
            <span v-show="item.hasEmpty && item.dataField && store[item.dataField]?.length" @click="eventEmptySelectItems(item)"
              >清空</span
            >
            <span class="fr cur-p v1-f-success editIcon" @click="eventShowEditPop(item)">{{ item.editTypeText || "编辑" }}</span>
            <slot :name="item.headSlot"></slot>
          </th>
        </tr>
      </thead>
      <tbody style="">
        <tr style="" class="content">
          <td v-for="item in cols" :key="item.name" :data-name="item.name" v-show="!item.hide">
            <div class="cell" :style="{ 'height': (item.height || 350) + 'px', 'overflow-y': 'auto' }">
              <slot :name="item.slot"></slot>
              <component :is="renderMap.get(item.render)?.(item) ?? renderMap.get('default')"></component>
            </div>
          </td>
        </tr>
      </tbody>
    </table>

    <component :is="modalComponentUri" :key="modalComponentName"></component>
  </div>
</template>

<script setup lang="ts">
import { inject, defineAsyncComponent, ref, shallowRef } from "vue";
import { message, Modal } from "ant-design-vue";
import { EXCHANGE } from "@/config/enum";
import { batchCreateAdStore } from "@/pages/NewBatchCreateAd/store/batchCreateAdStore";

import { ADX_FILE_NAME_MAP } from "../dto/strategyDto";

const store = batchCreateAdStore();

const adxId: any = inject("adxId");
const adxSubId: any = inject("adxSubId");


// 清空
const eventEmptySelectItems = (col: any) => {
  Modal.confirm({
    title: "确认",
    content: `确认要清空所有${col.text}吗？`,
    onOk() {
      if (col.dataField) {
        store[col.dataField] = [];
        // 如果是千川全域推广清空账户
        if (col.name === "account" && adxSubId.value === EXCHANGE.QIANCHUAN_QY) {
          store.Plan.select_plans = [];
        }
        // 如果是小米删除转化追踪,转化出价,自定义人群,落地页,监控链接
        if (col.name === "account" && adxId.value === EXCHANGE.XIAOMI) {
          store.Plan.conversionsMap = {};
          store.Plan.converBidMap = {};
          store.Campaign.audienceMap = {};
          store.CreativeConfig.ladingPageMap = {};
          store.Monitor = {};
        }
      }
    },
  });
};

const modalComponentName = ref(); //保存需要加载的的组件名称
const modalComponentUri = shallowRef();

const eventShowEditPop = (col: any) => {
  // 如果是趣头条创意素材
  if (col.name === "creatives" && adxId.value === EXCHANGE.QUTOUTIAO) {
    if (!store.CreativeConfig.type) {
      message.warning("请在创意基本信息中设置创意样式");
      return;
    }
  }

  // 如果是趣头条监控链接
  if (col.name === "monitor" && adxId.value === EXCHANGE.QUTOUTIAO) {
    if (!store.AccountItems.length) {
      message.warning("请先选择账号");
      return;
    }
  }

  // 如果是小米定向包
  if (col.name === "target" && adxId.value === EXCHANGE.XIAOMI) {
    if (store.Campaign?.displayType == 34) {
      message.warning("商店-富媒体版位无需设置定向包");
      return;
    }
  }

  // 异步组件
  modalComponentName.value = col.name;

  let adxFileName:any = adxSubId.value ? ADX_FILE_NAME_MAP[adxSubId.value] : ADX_FILE_NAME_MAP[adxId.value];

  switch (col.name) {
    case "account":
      modalComponentUri.value = defineAsyncComponent({
        loader: () => import("../modal/SelectAccount.vue"),
        delay: 200,
      });
      break;
    default:
      modalComponentUri.value = defineAsyncComponent({
        loader: () => import(`../adx/${adxFileName}/${col.name}/index.vue`),
        delay: 200,
      });
      break;
  }
};

const props = defineProps<{
  hasTheadGroup: boolean;
  headTips: any[];
  cols: any[];
}>();
</script>

<style scoped></style>
